<div id="linkSelect" v-cloak>
    <div class="dialog-body display-flex" style="align-items: flex-start">
        <div class="dialog-left">
            <el-menu :default-active="activeIndex" class="el-menu-level" :collapse="false" @select="selected">
                <el-menu-item :index="index" v-for="(item,index) in linkData">
                    <span slot="title">
                        <a :href="'#'+index"></a>
                        {{item.group==''?'其它':item.group}}</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="dialog-right">
            <div class="dialog-right-body">
                <a v-for="(group,index) in linkData" :name="index" :class="'scroll-item scroll-item-'+index">
                    <div class="dialog-right-body-title display-flex">
                        <div>
                            <i class="el-icon-tickets"></i>
                            <span>{{group.group==''?'其它':group.group}}</span>
                        </div>
                    </div>
                    <div class="select-container display-flex">
                        <div v-for="(item,idx) in group.children" class="select-item display-flex-c"
                            :class="item.selected?'custom-select-active':''"
                            @click="operation('select',item,index,idx)">
                            {{item.name}}</div>
                    </div>
                </a>
                <div style="padding: 150px;"></div>
            </div>
        </div>
    </div>
    <el-dialog title="类型" :visible.sync="dialogVisible" width="30%" :show-close="false">
        <div class="display-flex" style="justify-content: space-between;">
            <div style="width: 40%;border: 1px solid #e6e6e6;display: flex;align-items: center;justify-content: center;height: 40px;cursor: pointer;"
                @click="posterUser">个人海报</div>
            <div style="width: 40%;border: 1px solid #e6e6e6;display: flex;align-items: center;justify-content: center;height: 40px;cursor: pointer;"
                @click="posterGood">商品海报</div>
        </div>
    </el-dialog>
</div>
<div id="selectlinkDlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>

<script>
    var linkSelectVm = new Vue({
        el: "#linkSelect",
        data() {
            return {
                linkData: [],
                searchWhere: '',
                activeIndex: 0,
                selectedid: null,
                rowData: {},
                multiple: new URLSearchParams(location.search).get('multiple'),
                dialogVisible: false,
                isAll:false
            }
        },
        mounted() {
            this.getData();
            this.$nextTick(() => {
                $('.scroll-item').each(function (i, element) {
                    var h = $(element).height();
                });

            });
            window.addEventListener('scroll', this.handleScroll, true)
        },
        methods: {
            checkedAll(val) {
                this.isAll = val;
                this.rowData=[];
                this.linkData.forEach(i => {
                    if(i.children && i.children.length>0){
                        i.children.forEach(j=>{
                            j.selected=val
                        })
                    }
                })
                if(val){
                    this.linkData.forEach(i => {
                        if(i.children && i.children.length>0){
                            i.children.forEach(j=>{
                                this.rowData.push(j)
                            })
                        }
                    })
                }
                this.$forceUpdate();
            },
            getData() {
                let that = this;
                $.post('/admin/decorate/selectlink', {}, function (res) {
                    that.linkData = res.data;
                    return false;
                });
            },
            operation(type, rows, index, idx) {
                let multiple = false;
                let that = this;
                switch (type) {
                    case 'cancel':
                        Fast.api.close({
                            data: {},
                            multiple: multiple
                        });
                        break;
                    case 'define':
                        let row = this.rowData;
                        if (that.multiple == 'true') {
                            if (row.length > 0) {
                                var multiplePath = []
                                row.forEach(r => {
                                    r.path_name = r.name;
                                    multiplePath.push(r.path)
                                })
                                row = {
                                    path: multiplePath.join(',')
                                }
                                Fast.api.close({
                                    data: row,
                                    multiple: multiple
                                });
                            }
                        } else {
                            Fast.api.close({
                                data: row,
                                multiple: multiple
                            });
                        }
                        break;
                    case 'select':
                        if (that.multiple == 'true') {
                            this.linkData[index].children[idx].selected = !this.linkData[index].children[idx].selected;
                            let rowsArr = []
                            this.linkData.forEach(e => {
                                if (e.children && e.children.length > 0) {
                                    e.children.forEach(i => {
                                        if (i.selected) {
                                            rowsArr.push(i)
                                        }
                                    })
                                }
                            });
                            this.rowData = rowsArr;
                        } else {
                            this.linkData.forEach(e => {
                                if (e.children && e.children.length > 0) {
                                    e.children.forEach(i => {
                                        i.selected = false;
                                    })
                                }
                            });
                            this.linkData[index].children[idx].selected = !this.linkData[index].children[idx].selected;
                            this.rowData = rows;
                            let row = JSON.parse(JSON.stringify(this.rowData));
                            switch (row.path) {
                                case '/pages/goods/list':
                                case '/pages/index/category':
                                    $("#selectlinkDlg").dialog({
                                        title: '选择分类',
                                        closed: false,
                                        width: 840,
                                        height: 520,
                                        cache: false,
                                        href: '/admin/decorate/selectcategory?multiple=0',
                                        modal: true,
                                        buttons: [{
                                            text: '选择',
                                            id: 'selectlinksubmit',
                                            iconCls: 'icon-ok',
                                        }, {
                                            text: '关闭',
                                            iconCls: 'icon-no',
                                            handler: function () {
                                                $("#selectlinkDlg").dialog('close');
                                            }
                                        }]
                                    });
                                    break;
                                case '/pages/goods/detail':
                                    $("#selectlinkDlg").dialog({
                                        title: '选择商品',
                                        closed: false,
                                        width: 840,
                                        height: 520,
                                        cache: false,
                                        href: '/admin/decorate/selectgoods?multiple=0',
                                        modal: true,
                                        buttons: [{
                                            text: '选择',
                                            id: 'selectlinksubmit',
                                            iconCls: 'icon-ok',
                                        }, {
                                            text: '关闭',
                                            iconCls: 'icon-no',
                                            handler: function () {
                                                $("#selectlinkDlg").dialog('close');
                                            }
                                        }]
                                    });
                                    break;
                                case '/pages/public/richtext':
                                    $("#selectlinkDlg").dialog({
                                        title: '选择富文本',
                                        closed: false,
                                        width: 840,
                                        height: 520,
                                        cache: false,
                                        href: '/admin/decorate/selectrichtext',
                                        modal: true,
                                        buttons: [{
                                            text: '选择',
                                            id: 'selectlinksubmit',
                                            iconCls: 'icon-ok',
                                        }, {
                                            text: '关闭',
                                            iconCls: 'icon-no',
                                            handler: function () {
                                                $("#selectlinkDlg").dialog('close');
                                            }
                                        }]
                                    });
                                    break;
                                case '/pages/public/poster/index':
                                    that.dialogVisible = true;
                                    that.rowData = row;
                                    break;
                                case '/pages/index/view':
                                    $("#selectlinkDlg").dialog({
                                        title: '选择自定义页面',
                                        closed: false,
                                        width: 840,
                                        height: 520,
                                        cache: false,
                                        href: '/admin/decorate/selectcustom',
                                        modal: true,
                                        buttons: [{
                                            text: '选择',
                                            id: 'selectlinksubmit',
                                            iconCls: 'icon-ok',
                                        }, {
                                            text: '关闭',
                                            iconCls: 'icon-no',
                                            handler: function () {
                                                $("#selectlinkDlg").dialog('close');
                                            }
                                        }]
                                    });
                                    break;
                                default:
                                    row.path_name = row.name
                                    that.rowData = row;
                            }
                        }

                        this.$forceUpdate();
                        break;
                }
            },
            selected(index) {
                this.activeIndex = index;
                $('.scroll-item-'+index)[0].scrollIntoView(true);
            },
            posterUser() {
                let that = this;
                let row = that.rowData;
                that.dialogVisible = false;
                row.path_name = '个人海报'
                row.path = row.path + '?posterType=user'
                that.rowData = row;
            },
            posterGood() {
                let that = this;
                let row = that.rowData;
                that.dialogVisible = false;
                parent.Fast.api.open("shopro/goods/goods/select?multiple=" + false, __('Choose'), {
                    callback: function (data) {
                        row.path_name = '商品海报'
                        row.path += '?posterType=goods&id=' + data.data.id.toString()
                        that.rowData = row;
                    }
                });
            },
            handleScroll() {
                let arr = [];
                let heightArr = [];
                $('.scroll-item').each(function (i, element) {
                    var v = $(element).offset().top - $('#dodecoratedlg').offset().top;
                    var h = $(element).outerHeight(true);
                    arr.push(v);
                    heightArr.push(h)
                });
                let handel = [];
                let indexs = [];
                arr.forEach((i, index) => {
                    if (i > 0) {
                        handel.push(i);
                        indexs.push(index);
                    }
                })
                if (handel[0] < heightArr[indexs[0]]/2) {
                    this.activeIndex = indexs[0];
                } else {
                    this.activeIndex = indexs[0] - 1;
                }
            },

        },
    })

    $('#dodecoratesubmit').click(function(data){
        let row = linkSelectVm.rowData;
        if(row.id){
            row.index = parseInt('<?php echo $index;?>');
            decorateVm.selectedLink(row);
            $("#dodecoratedlg").dialog('close');
        }else{
            $.messager.alert('提示', '请先选择链接！', 'warning');
        }
    })
</script>

<style>
    #linkSelect {
        background: #fff;
        overflow: hidden;
        color: #444;
        height: 100%;
        width: 100%;
    }

    .scroll-item{
        display: block;
    }

    .el-menu-level {
        margin: 0 20px;
        border: none;
    }

    .el-menu-level .el-menu-item,
    .el-submenu__title,
    .el-menu-item-group__title {
        height: 32px;
        line-height: 32px;
        min-width: 100px !important;
        padding: 0 0 0 20px !important;
        font-size: 12px;
        background: rgba(116, 56, 213, 0);
    }

    .el-menu-item.is-active {
        color: #7536D0;
        background: rgba(116, 56, 213, 0.14);
        border-radius: 4px;
    }

    .dialog-left {
        width: 140px;
        border-right: 1px solid #e6e6e6;
        height: 425px;
        padding-top: 9px;
        overflow: hidden;
        position: fixed;
    }

    .dialog-right {
        height: 100vh;
        margin-left: 140px;
        flex: 1;
    }

    .dialog-search {
        padding: 9px 20px;
    }

    .dialog-search .el-input {
        width: 240px;

    }

    .dialog-search .el-input__inner {
        background: #F9F9F9;
        border: none;
    }

    .dialog-right-body {
        padding: 0 20px 20px;
        height: calc(100vh - 112px);
        overflow: auto;
    }

    .dialog-footer {
        padding: 15px 20px;
        justify-content: flex-end;
    }

    .operation-button {
        width: 60px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        font-size: 12px;
        margin-left: 10px;
        cursor: pointer;
    }

    .cancel-button {
        border: 1px solid #E6E6E6;
        color: #C4C4C4;
    }

    .define-button {
        background: #6E3DC8;
        color: #fff;
    }

    .dialog-right-body-title {
        height: 50px;
        justify-content: space-between;
        font-size: 12px;
        margin-bottom: 10px;
        align-items: center;
    }

    .dialog-right-body-title .el-icon-tickets {
        font-size: 13px;
        color: #7438D5;
        margin-right: 10px;
    }

    .select-container {
        flex-wrap: wrap;
    }

    .select-item {
        /* width: 70px; */
        padding: 8px 16px;
        /* height: 32px; */
        border: 1px solid #E6E6E6;
        border-radius: 4px;
        color: #444;
        cursor: pointer;
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .custom-select-active,
    .custom-select-active:focus {
        border-color: #7438D5 !important;
        color: #7438D5;
    }
    .dialog-left::-webkit-scrollbar,.dialog-right-body::-webkit-scrollbar {
        width: 6px;
    }

    .dialog-left::-webkit-scrollbar-thumb,.dialog-right-body::-webkit-scrollbar-thumb {
        width: 6px;
        background: #ccc;
        height: 20px;
        border-radius: 3px;
    }

    [v-cloak] {
        display: none
    }
</style>